<template>
	<view class="cube">
		<view class="containers" :style="'padding:' + mydata.padding.top + 'rpx ' + mydata.padding.lr + 'rpx ' + mydata.padding.bottom + 'rpx ' + mydata.padding.lr + 'rpx '">
			<view class="custom-box" :style="'margin:-' + mydata.padding.between / 4 + 'px;height:' + mydata.height + 'px'">
				<vcustomer v-for="(item, i) in mydata.checklist" :linkdata="item.linkdata">
					<view
						class="custom-img-box"
						:style="
							'padding:' + mydata.padding.between / 2 + 'rpx;left: ' + item.x + '%; top: ' + item.y + '%; width:' + item.width + '%; height: ' + item.height + '%;'
						"
					>
						<vimage :src="item.img" mode="aspectFill" class="custom-img" :imgstyle="itemstyle"></vimage>
					</view>
				</vcustomer>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		mydata: {
			type: Object,
			default: {}
		}
	},
	computed: {
		itemstyle() {
			return 'border-radius:' + this.mydata.r_t + 'rpx ' + this.mydata.r_t + 'rpx ' + this.mydata.r_b + 'rpx ' + this.mydata.r_b + 'rpx ';
		}
	}
};
</script>

<style lang="scss" scoped>
.cube {
	.containers {
		overflow: hidden;
		.custom-box {
			position: relative;
			.custom-img-box {
				position: absolute;
				.custom-img {
					border-radius: 6px;
					-o-object-fit: cover;
					object-fit: cover;
					height: 100%;
					width: 100%;
				}
			}
		}
	}
}
</style>
